<template>
  <div class="RxPicker">
    <picker mode="selector" :value="index" :rangeKey="rangeKey" @change="change" :range="rangeList">
      <slot></slot>
    </picker>
  </div>
</template>

<script>
//下拉选择框
export default {
  name: "RxPicker",
  props:{
    rangeList:{
      type: Array,
      default() {
        return [];
      }
    },
    rangeKey:{
      type:String,
      default(){
        return '';
      }
    },
    value:{
      type:String,
      default(){
        return '';
      }
    }
  },
  data(){
    return{
      index:0,
      localValue:'',
    }
  },
  watch: {
    value(newVal) {
      this.localValue = newVal;
      this.rangeList.filter((res,index)=>{
        if(res[this.rangeKey] ==newVal){
          this.index = index
        }
      })
    }
  },
  methods:{
    change(e){
      let obj =  this.rangeList[e.detail.value];
      this.$emit('change',obj);
    }
  }
}
</script>

<style>
</style>